<template>
  <div class="custom-wrap">
    <div class="breadcrumb">
      <router-link :to="{name:'custom', params: {id: 1}}">定制追踪</router-link>
      <span>&gt;{{breadcrumb}}</span>
    </div>
    <ul class="sub-menu flex">
      <li>
        <router-link :to="{name:'addCustomTopic'}">新增定制</router-link>
      </li>
      <li>
        <router-link :to="{name:'myCustomTopic'}">我的定制</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'custom',
    data () {
      return {
        breadcrumb: '新增定制'
      }
    },
    watch: {
      $route () {
        if (this.$route.name === 'addCustomTopic') {
          this.breadcrumb = '新增定制'
        } else {
          this.breadcrumb = '我的定制'
        }
      }
    }
  }
</script>

<style lang="scss">
.custom-wrap{
  padding-top:50px;
  .breadcrumb{
    font-size: 15px;
    color: #24282e;
  }
  .sub-menu{
    margin-top: 20px;
    background-color:#e9edf2;
    a{
      display: block;
      width: 180px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      &.router-link-active{
        background-color:#fff;
      }
    }
  }
  .add-custom-wrap,.my-custom-wrap{
    background-color:#fff;
    min-height: 600px;
    >div{
      padding-bottom: 50px;
    }
  }
  .not-data{
    margin:25px 0;
    color:#878787;
    font-size:16px;
    a{
      color:#00ba91;
    }
  }
}
</style>
